{% extends 'base.html' %}
{% load custom_filters %}

{% block content %}
<style>
  #imageModal .modal-body {
  max-height: 80vh;
  text-align: center;
}

#modalImage {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}
.bg-primary {
  background-color: #60a9f8; 
  color: #fff;
  }
  .card {
    border-radius: 10px;
}#DI {
  text-align: center;
  padding: 10px;
  background-color: #f1f1f1;
  border-radius: 5px;
  margin-bottom: 20px;
}

#DI a {
  color: #333333;
  text-decoration: none;
}




</style>
<ul class="nav nav-tabs">
  <li class="nav-item" style="width: 50%;">
    <h2 class="nav-link active " data-toggle="tab" href="#score2">积分榜信息</h2>
  </li>
  <li class="nav-item" style="width: 50%;">
      <h2 class="nav-link " data-toggle="tab" href="#score1">得分榜信息</h2>
  </li>
</ul>
  <!-- 创建标签页内容 -->
  <div class="tab-content">
        <div class="tab-pane" id="score1">
          <div class="row">
            <div class="col-md-6 bg-primary rounded">
              <h4 class="my-5 text-center">得分排行榜</h4>
              <ol class="list-group">
                {% for student in Score_top_students %}
                  <li class="list-group-item d-flex justify-content-between align-items-center {% if forloop.counter == 1 %}first{% elif forloop.counter == 2 %}second{% elif forloop.counter == 3 %}third{% endif %}">
                    <span>{% if forloop.counter <= 10 %}<span class="badge bg-primary me-2">{{ forloop.counter }}</span>{% endif %}{{ student.student__name }}</span>
                    <span class="badge bg-primary rounded-pill">{{ student.total_score }} 分</span>
                  </li>
                {% endfor %}
                <li class="align-items-center "></li>
              </ol>
            </div>
        
            <div class="col-md-6 rounded border">
              <h4 class="my-5 text-center">统计信息</h4>
              <div class="row">
                <div class="col-md-6">
                  <div class="card mb-5 text-center" >
                    <div class="card-header bg-primary">
                      <h2 class="card-title">学生总数</h2>
                    </div>
                    <div class="card-body">
                      <h3 class="card-text">{{ Score_num_students }}</h3>
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="card mb-5 text-center" >
                    <div class="card-header bg-primary">
                      <h2 class="card-title">最高总分</h2>
                    </div>
                    <div class="card-body">
                      <h3 class="card-text">{{ Score_topOne.student__name }}({{Score_topOne.total_score}})</h3>
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="card mb-5 text-center" >
                    <div class="card-header bg-primary">
                      <h2 class="card-title">本周最高分</h2>
                    </div>
                    <div class="card-body">
                      <h3 class="card-text">{{ Score_this_week_high_score }}</h3>
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="card mb-5 text-center" >
                    <div class="card-header bg-primary">
                      <h2 class="card-title">本周最高加分</h2>
                    </div>
                    <div class="card-body">
                      <h3 class="card-text">{{ Score_this_week_high_add_score }}</h3>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="tab-pane active  " id="score2">
          <div class="row">
            <div class="col-md-6 bg-primary rounded">
              <h4 class="my-5 text-center">积分排行榜</h4>
              <ol class="list-group">
                {% for student in top_students %}
                  <li class="list-group-item d-flex justify-content-between align-items-center {% if forloop.counter == 1 %}first{% elif forloop.counter == 2 %}second{% elif forloop.counter == 3 %}third{% endif %}">
                    <span>{% if forloop.counter <= 10 %}<span class="badge bg-primary me-2">{{ forloop.counter }}</span>{% endif %}{{ student.name }}</span>
                    <span class="badge bg-primary rounded-pill">{{ student.total_score }} 分</span>
                  </li>
                {% endfor %}
                <li ></li>
              </ol>
            </div>
        
            <div class="col-md-6 rounded border">
              <h4 class="my-5 text-center">统计信息</h4>
              <div class="row">
                <div class="col-md-6">
                  <div class="card mb-5 text-center" >
                    <div class="card-header bg-primary">
                      <h2 class="card-title">参与总人数</h2>
                    </div>
                    <div class="card-body">
                      <h3 class="card-text">{{ num_students }}</h3>
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="card mb-5 text-center" >
                    <div class="card-header bg-primary">
                      <h2 class="card-title">今天打卡人数</h2>
                    </div>
                    <div class="card-body">
                      <h3 class="card-text">{{ num_checkins_today }}</h3>
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="card mb-5 text-center" >
                    <div class="card-header bg-primary">
                      <h2 class="card-title">本周打卡人数</h2>
                    </div>
                    <div class="card-body">
                      <h3 class="card-text">{{ num_checkins_this_week }}</h3>
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="card mb-5 text-center" >
                    <div class="card-header bg-primary">
                      <h2 class="card-title">累计打卡总次数</h2>
                    </div>
                    <div class="card-body">
                      <h3 class="card-text">{{ num_checkins_total }}</h3>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
</div>
<div class="container my-5">
  
  
  <h2 class="my-5">打卡记录</h2>
  <div class="card-deck" id="checkin-container">
    <!-- {% for checkin in checkins %}
      <div class="card mb-5">
        <div class="card-header bg-primary">
            <h5 class="card-title" style="display: inline-block;">{{ checkin.student.name }}</h5>
            <p class="badge bg-primary rounded-pill">{{ checkin.student.Classes }}</p>
        </div>
        
          <div class="card-body">
            <p class="card-text">{{ checkin.checkin_text }}</p>
          </div>
          {% if checkin.checkin_image %}
            <img class="card-img-bottom" src="{{ MEDIA_URL }}{{ checkin.checkin_image.url }}" alt="{{ checkin.checkin_text }}">
          {% endif %}
          <div class="modal-header">
            <div>
              <p class="badge bg-primary rounded-pill"> {{ checkin.checkin_date|date:'Y-m-d H:i:s'|time_since_checkin }}</p>
              <p class="badge bg-primary rounded-pill">获得{{checkin.score}}积分</p>
            </div>
            <div>
              点赞功能敬请期待
            </div>
        </div>
      </div>
    {% endfor %} -->
  </div>
  <button class="btn btn-primary " id="load-more-button">加载更多</button>
  <div id='DI'><a>已经到底了！</a></div>
  <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <img id="modalImage" src="" alt="">
        </div>
      </div>
    </div>
  </div>

</div>

<script>
  $('#imageModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget); // Button that triggered the modal
    var image = button.data('image'); // Extract info from data-* attributes
    var modalImage = $(this).find('#modalImage');
    modalImage.attr('src', image);
  })
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  dashboard()
  // 获取按钮和<div>元素
const button = document.getElementById('load-more-button');
const div = document.getElementById('DI');

// 添加点击事件监听器
button.addEventListener('click', function() {
  // 点击按钮时，隐藏按钮并显示<div>
  button.style.display = 'none';
  div.style.display = 'block';
});

// 默认情况下，隐藏<div>
div.style.display = 'none';
});

function dashboard(request) {
  var loadMoreButton = $('#load-more-button');
  var checkinContainer = $('#checkin-container');
  var currentPageNumber = 1;  // 假设初始页码为1
  // 获取提示信息元素
  var di = document.getElementById('DI'); 
  var loadMoreUrl = '{% url 'load_more_checkins' %}?page=' + currentPageNumber;  // 替换为您的URL
  
  loadMoreButton.click(function() {
    $.ajax({
      url: loadMoreUrl,
      type: 'GET',
      success: function(response_data) {
        // alert(loadMoreUrl);
        
        var checkins_data = response_data.checkins;
        // 遍历打卡记录数据并渲染到页面上
        for (var i = 0; i < checkins_data.length; i++) {
          var checkinData = checkins_data[i];
          var checkinElement = createCheckinElement(checkinData);

          // 将打卡记录元素追加到容器中
          checkinContainer.append(checkinElement);
        }
        currentPageNumber++;
        loadMoreUrl = '{% url 'load_more_checkins' %}?page=' + currentPageNumber; 
        // alert("currentPageNumber:"+currentPageNumber)
        // showPopup("data.has_next_page:"+response_data.has_next_page)
        // 检查是否还有更多记录
        if (!response_data.has_next_page) {
          // 隐藏加载更多按钮
          loadMoreButton.hide();
          di.style.display = 'block';
        }
      },
      error: function(xhr, status, error) {
        var errorMessage = '打卡数据加载失败，请重试！\n' + '状态码：' + xhr.status + '\n错误信息:' + error;
        showPopup(errorMessage);
      }
    });
  });
  // 执行一次点击事件
  loadMoreButton.click();
}


// 创建打卡记录元素的函数
function createCheckinElement(checkinData) {
  var checkinDate = new Date(checkinData.checkin_date);
  
  // 创建日期格式化选项对象
  var options = {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    timeZone: 'Asia/Shanghai' // 设置时区为亚洲/上海
  };
  
  // 格式化日期
  var formattedDate = new Intl.DateTimeFormat('zh-CN', options).format(checkinDate);
  

  var card = $('<div>').addClass('card mb-5');
  var cardHeader = $('<div>').addClass('card-header bg-primary');
  
  var cardTitle = $('<h5>').addClass('card-title').text(checkinData.name).css('display', 'inline-block');
  var classBadge = $('<p>').addClass('badge bg-primary rounded-pill').text( checkinData.class);
  
  
  cardHeader.append(cardTitle, classBadge);
  
  var cardBody = $('<div>').addClass('card-body');
  var cardText = $('<p>').addClass('card-text').text(checkinData.checkin_text);
  
  cardBody.append(cardText);
  
  card.append(cardHeader, cardBody);
  
  if (checkinData.checkin_image_url) {
    var cardImage = $('<img>').addClass('card-img-bottom').attr('src', checkinData.checkin_image_url).attr('alt', checkinData.checkin_text);
    card.append(cardImage);
  }
  var modalHeader = $('<div>').addClass('modal-header');
  var modalHeaderLeft = $('<div>');
  var dateBadge = $('<p>').addClass('badge bg-primary rounded-pill').text('打卡时间: ' + moment(formattedDate,'YYYY-MM-DD HH:mm:ss').fromNow());
  var checkinDateBadge = $('<p>').addClass('badge bg-primary rounded-pill').text(checkinData.checkin_date);
  var scoreBadge = $('<p>').addClass('badge bg-primary rounded-pill').text('获得' + checkinData.score + '积分');
  
  modalHeaderLeft.append(dateBadge,checkinDateBadge, scoreBadge);
  
  var modalHeaderRight = $('<div>').text('点赞功能奋力开发中...');
  
  modalHeader.append(modalHeaderLeft, modalHeaderRight);
  
  card.append(modalHeader);

  return card;
}

// function createCheckinElement(checkinData) {
//   var card = $('<div>').addClass('card mb-5');
//   var cardHeader = $('<div>').addClass('card-header bg-primary');
//   var cardTitle = $('<h5>').addClass('card-title').text(checkinData.name);
//   var cardBadge = $('<p>').addClass('badge bg-primary rounded-pill').text(checkinData.class);
  
//   cardHeader.append(cardTitle, cardBadge);
  
//   var cardBody = $('<div>').addClass('card-body');
//   var cardText = $('<p>').addClass('card-text').text(checkinData.checkin_text);
  
//   cardBody.append(cardText);
  
//   if (checkinData.checkin_image_url) {
//     var cardImage = $('<img>').addClass('card-img-bottom').attr('src', checkinData.checkin_image_url).attr('alt', checkinData.checkin_text);
//     card.append(cardImage);
//   }
  
//   var modalHeader = $('<div>').addClass('modal-header');
//   var modalHeaderLeft = $('<div>');
//   var checkinDateBadge = $('<p>').addClass('badge bg-primary rounded-pill').text(checkinData.checkin_date);
//   var scoreBadge = $('<p>').addClass('badge bg-primary rounded-pill').text('获得' + checkinData.score + '积分');
  
//   modalHeaderLeft.append(checkinDateBadge, scoreBadge);
  
//   var modalHeaderRight = $('<div>').text('点赞功能敬请期待');
  
//   modalHeader.append(modalHeaderLeft, modalHeaderRight);
  
//   card.append(cardHeader, cardBody, modalHeader);
  
//   return card;
// }



</script>
{% endblock %}
